<template>
  <div class="addContent_wrap clearfix">
    <el-form label-width="100px" ref="form" :model="form" :rules="rules">
      <div class="left clearfix">
        <ul>
          <li>
            <el-form-item label="标题：" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="排序：" class="flex">
              <el-input-number v-model="form.sort"></el-input-number>
              <el-checkbox v-model="hotStatus">热门</el-checkbox>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="外链：" class="flex">
              <el-input v-model="form.outerChain"></el-input>
              <el-checkbox v-model="isOuter">是</el-checkbox>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="栏目：">
              <treeselect
                class="treeSelect"
                :options="columnData"
                :clearable="false"
                v-model="form.columnId"
                :normalizer="normalizer"
                placeholder="请选择栏目"
              />
            </el-form-item>
          </li>
          <li>
            <el-form-item label="预估成交价：">
              <el-input v-model="form.predict">
                <template slot="append">(万元)</template>
              </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="归属产品：">
              <el-select v-model="form.productId" placeholder="请选择">
                <el-option
                  v-for="item in proList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="房屋面积：">
              <el-input v-model="form.houseArea">
                <template slot="append">(平方米)</template>
              </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="户型：">
              <el-input v-model="form.houseType"></el-input>
            </el-form-item>
          </li>
          <li class="full">
            <el-form-item label="查看经纪人：">
              <el-select v-model="form.classify" placeholder="请选择">
                <el-option
                  v-for="item in classifyList"
                  :key="item.itemValue"
                  :label="item.itemText"
                  :value="item.itemValue"
                >
                </el-option>
              </el-select>
              <span class="red">*大于此等级以上均可查看</span>
            </el-form-item>
          </li>
          <div class="clearfix sub_wrap">
            <p class="subtitle">基本信息</p>
          </div>
          <li class="full te">
            <el-form-item label="房屋特点：">
              <el-input v-model="form.trait"></el-input>
              <span class="red">多个词请用 " ; " 隔开</span>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="市场价：">
              <el-input v-model="form.housePrice">
                <template slot="append">(万元)</template>
              </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="起拍价：">
              <el-input v-model="form.origin">
                <template slot="append">(万元)</template>
              </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="起拍时间:">
              <el-date-picker
                style="width:165px"
                v-model="form.auctionTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="类型：">
              <el-input v-model="form.type"> </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="装修：">
              <el-input v-model="form.decorate"> </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="年代：">
              <el-input v-model="form.age"> </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="预算：">
              <el-input v-model="form.budget"> </el-input>
            </el-form-item>
          </li>
          <li class="full">
            <el-form-item label="位置：">
              <el-input v-model="form.location"> </el-input>
            </el-form-item>
          </li>
        </ul>
      </div>
      <div class="right clearfix">
        <div class="pc" v-if="!contentId">
          <el-upload
            action=""
            list-type="picture-card"
            :auto-upload="false"
            :on-change="selPcNew"
            :on-remove="remPcNew"
            :limit="1"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>PC封面图</div>
        </div>
        <div class="pc" v-else>
          <el-upload
            ref="uploadPc"
            :action="ImgUrl"
            :headers="parmas"
            :data="pcData"
            :limit="1"
            :file-list="filelistPc"
            :on-success="successPc"
            :on-remove="remEncOnePc"
            list-type="picture-card"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>PC封面图</div>
        </div>
        <div class="wx" v-if="!contentId">
          <el-upload
            action=""
            list-type="picture-card"
            :auto-upload="false"
            :data="wxData"
            :limit="1"
            :on-change="selWxNew"
            :on-remove="remWxNew"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>微信端封面图</div>
        </div>
        <div class="wx" v-else>
          <el-upload
            ref="uploadWx"
            list-type="picture-card"
            :action="ImgUrl"
            :headers="parmas"
            :data="wxData"
            :limit="1"
            :file-list="filelistWx"
            :on-remove="remEncOneWx"
            :on-success="successWx"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>微信端封面图</div>
        </div>
      </div>
      <!-- <div class="amap-wrapper clearfix">
        <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
      </div> -->
      <div class="item_footer">
        <div class="newAdd" v-if="!contentId">
          <el-form-item label="房屋照片：">
            <el-upload
              action=""
              :auto-upload="false"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-change="selNewEncMuc"
              :on-remove="remNewEncMuc"
              :on-exceed="handleExceed"
              class="uploadHouse"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
        <div class="newAdd" v-else>
          <el-form-item label="房屋照片：">
            <!-- <el-upload
              class="upload-demo enclo"
              :action="uploadMany"
              :headers="parmas"
              :data="manyData"
              :file-list="filelistMany"
              :on-remove="remEncMany"
              :on-success="successMany"
              :before-remove="beforeRemove"
            >
              <span slot="tip" class="el-upload__tip">多附件：</span>
              <el-button type="text" v-no-more-click>点击上传</el-button>
            </el-upload> -->
            <el-upload
              :action="uploadMany"
              :headers="parmas"
              :data="manyData"
              :file-list="filelistMany"
              :on-preview="handlePictureCardPreview"
              :on-success="successMany"
              :on-remove="remEncMany"
              list-type="picture-card"
              :before-remove="beforeRemove"
              class="upload-demo enclo"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
      </div>
<!--      <h1>-->
<!--        当前位置:-->
<!--        <el-button @click="ModifyLocation" v-if="ycxs == 2">修改位置</el-button>-->
<!--      </h1>-->
<!--      <div v-if="ycxs == 2">-->
<!--        <Map :address0="address" v-if="address.length"></Map>-->
<!--      </div>-->
<!--      <div v-if="ycxs == 1"><MapMaker @bMapDate="bMapDate"></MapMaker></div>-->
      <div class="clearfix sub_wrap">
        <p class="subtitle">核心卖点</p>
      </div>
      <div class="item_footer">
        <el-form-item label="房屋优势：" class="left_text">
          <el-input v-model="form.merit"></el-input>
          <span class="red">多个词请用 " ; " 隔开</span>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="描述：">
          <el-input v-model="form.brief" type="textarea"></el-input>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="海报描述:">
          <el-input v-model="form.posterDescribe" type="textarea"></el-input>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="温馨提示：">
          <el-input v-model="form.hint" type="textarea"></el-input>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="佣金：">
          <el-input v-model="form.brokerage" type="text"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer clearfix">
      <el-button @click="closeDia" v-no-more-click>取 消</el-button>
      <el-button type="primary" @click="submit" v-no-more-click>提交</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import Map from "../map/MapMaker.vue";
// import MapMaker from "../map/Map.vue";

import {
  getColumnList,
  getContentOne,
  delColumnEnc,
  delColumnMany,
  updateConHouse,
  getAstatus,
  getProList,
} from "../../../src/assets/js/api";

export default {
  name: "AddContent",
  components: {
    Treeselect,
    // Map,
    // MapMaker,
  },
  props: ["contentId", "getList"],
  data() {
    return {
      ycxs: 1,
      address: [106.523226, 29.581989], //地图经纬度!
      proList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      serverUrl: "",
      header: {},
      columnData: [],
      form: {
        title: null,
        sort: 1,
        projectId: null,
        classify: null,
      },
      isOuter: false,
      hotStatus: false,
      content: "",
      classifyList: [],
      MmltiFile: [],
      parmas: {
        COOKIE_TOKEN: "",
      },
      pcData: {
        uploadType: 1,
        id: null,
      },
      wxData: {
        uploadType: 2,
        id: null,
      },
      oddData: {
        uploadType: 3,
        id: null,
      },
      manyData: {
        id: null,
      },
      ImgUrl: "",
      uploadMany: "",
      filelistPc: [],
      filelistWx: [],
      filelistMany: [],
      find: [{ id: null, name: "不关联" }],
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        };
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }],
      },
    };
  },
  created() {
    this.getColumnList();
    this.getContent();
    this.getAstatus();
    this.getProList();
    this.serverUrl = `${this.axios.defaults.baseURL}/sys/content/upload`;
    let token = localStorage.getItem("token");
    this.header.COOKIE_TOKEN = token;
  },
  methods: {
    //修改位置按钮点击事件!
    ModifyLocation() {
      this.ycxs = 1;
      console.log(this.ycxs);
    },
    //地图的事件监听!
    bMapDate(lng, lat) {
      this.form.la = lat;
      this.form.lo = lng;
    },
    //查询产品列表
    getProList() {
      getProList().then((res) => {
        this.proList = res.data;
      });
    },
    //获取字典
    getAstatus() {
      //查询归类字典
      getAstatus("classification").then((res) => {
        let classify = [{ itemValue: null, itemText: "不限" }];
        let arr = res.data;
        arr.map((item) => {
          item.itemValue = parseInt(item.itemValue);
        });
        this.classifyList = classify.concat(arr);
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //获取栏目
    getColumnList() {
      getColumnList().then((res) => {
        this.columnData = res.data[1].children;
      });
    },
    //获取内容
    getContent() {
      if (this.contentId) {
        this.pcData.id = this.contentId;
        this.wxData.id = this.contentId;
        this.oddData.id = this.contentId;
        this.manyData.id = this.contentId;
        this.ImgUrl = `${this.axios.defaults.baseURL}/sys/content/singleUpload`;
        this.uploadMany = `${this.axios.defaults.baseURL}/sys/content/manyUpload`;
        this.parmas.COOKIE_TOKEN = localStorage.getItem("token");
        getContentOne(this.contentId).then((res) => {
          this.ycxs = 2;
          this.address[1] = JSON.parse(res.data.house.la);
          this.address[0] = JSON.parse(res.data.house.lo);
          this.form = Object.assign(res.data.content, res.data.house);
          //判断热门状态
          this.hotStatus = this.form.hotStatus == 1 ? true : false;
          this.isOuter = this.form.isOuter == 1 ? true : false;
          //判断是否有pc封面图片
          let arrPc = {};
          if (res.data.content.pcCoverImg) {
            arrPc.url = res.data.content.pcCoverImg;
            this.filelistPc.push(arrPc);
          }
          //判断是否有wx封面图
          let arrWx = {};
          if (res.data.content.wxCoverImg) {
            arrWx.url = res.data.content.wxCoverImg;
            this.filelistWx.push(arrWx);
          }
          //判断是否有多附件
          if (res.data.manyAccessory) {
            this.filelistMany = res.data.manyAccessory;
            this.filelistMany.map((item) => {
              if (item.showAccessory !== null) {
                item.name = item.showAccessory;
              } else {
                item.name = item.accessoryUrl;
              }
            });
          }
        });
      }
    },
    handleExceed() {
      this.$message.warning("只允许上传一个附件");
    },
    //新增 上传PC封面
    selPcNew(file) {
      this.form.pcCoverFile = file.raw;
    },
    remPcNew() {
      this.form.pcCoverFile = "";
    },
    //新增 上传Wx封面
    selWxNew(file) {
      this.form.wxCoverFile = file.raw;
    },
    remWxNew() {
      this.form.wxCoverFile = "";
    },
    //新增 上传多附件
    selNewEncMuc(file, fileList) {
      this.MmltiFile = fileList;
    },
    remNewEncMuc(file, fileList) {
      console.log(file);
      this.MmltiFile = fileList;
    },
    //删除单附件
    delColumnEnc(id, uploadType) {
      delColumnEnc({ id: id, uploadType: uploadType }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    remEncOnePc() {
      this.delColumnEnc(this.contentId, 1);
    },
    remEncOneWx() {
      this.delColumnEnc(this.contentId, 2);
    },
    //多附件删除
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    remEncMany(file) {
      delColumnMany(file.id).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    fileListPush(obj, res) {
      obj.push({
        id: res.data[0].id,
      });
    },
    successPc(res, file) {
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
      } else {
        this.$message.warning(file.response.message);
        this.filelistPc = [];
      }
    },
    successWx(res, file) {
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
      } else {
        this.$message.warning(file.response.message);
        this.filelistWx = [];
      }
    },
    //多附件上传
    successMany(res, file, fileList) {
      let fileListOld = JSON.parse(JSON.stringify(this.filelistMany));
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
        fileList.forEach((item) => {
          if (!item.id) {
            item.id = res.data[0];
          }
        });
        this.filelistMany = fileList;
      } else {
        this.$message.warning(file.response.message);
        this.filelistMany = fileListOld;
      }
    },
    //取消按钮
    closeDia() {
      this.$emit("dialogCol", false);
    },
    //新增内容
    newAddContetnt() {
      let that = this;
      this.form.hotStatus = this.hotStatus ? 1 : 0;
      this.form.isOuter = this.isOuter ? 1 : 0;
      const formData = new FormData();
      Object.keys(this.form).forEach((key) => {
        formData.append(key, this.form[key]);
      });
      for (let i = 0; i < this.MmltiFile.length; i++) {
        formData.append("manyFiles", this.MmltiFile[i].raw);
      }
      this.axios
        .post("/sys/content/saveHouse", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(function (res) {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.message,
              type: "success",
            });
            that.$emit("dialogCol", false);
            that.getList();
          } else {
            that.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch(function (error) {
          that.$message({
            message: error.message,
            type: "error",
          });
        });
    },
    //修改内容
    updateConHouse() {
      this.form.hotStatus = this.hotStatus ? 1 : 0;
      this.form.isOuter = this.isOuter ? 1 : 0;
      updateConHouse(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.$emit("dialogCol", false);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //提交按钮
    submit() {
      if (this.contentId) {
        this.$refs.form.validate().then(() => {
          if (this.form.projectId == null) {
            delete this.form.projectId;
          }
          if (this.form.classify == null) {
            delete this.form.classify;
          }
          this.updateConHouse();
        });
      } else {
        this.$refs.form.validate().then(() => {
          if (this.form.projectId == null) {
            delete this.form.projectId;
          }
          if (this.form.classify == null) {
            delete this.form.classify;
          }
          this.newAddContetnt();
        });
      }
    },
  },
};
</script>

<style scoped type="less">
.amap-wrapper {
  width: 100%;
  height: 200px;
  float: left;
  margin-bottom: 20px;
}
.uploadHouse {
  text-align: left;
}
.el-form-item__content {
  text-align: left;
}
.left_text {
  text-align: left;
}
.red {
  color: red;
  font-size: 12px;
}
.left {
  float: left;
  width: 70%;
}
.left li {
  width: 50%;
  float: left;
}
.left li.full {
  width: 100%;
}
.left li.full ::v-deep.el-form-item__content {
  text-align: left;
}
.left .el-form-item {
  margin-bottom: 16px;
}
.flex ::v-deep.el-form-item__content {
  display: flex;
}
.flex .el-checkbox {
  margin-left: 10px;
}
.left ::v-deep.el-form-item__label,
.left ::v-deep.el-form-item__content,
.left ::v-deep.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.te::v-deep.el-form-item__label,
.te ::v-deep.el-form-item__content {
  height: 48px;
  line-height: 32px;
}
.left ::v-deep.el-input__icon {
  line-height: 32px;
}
.left ::v-deep.vue-treeselect__control {
  height: 30px;
  line-height: 30px;
}
.left ::v-deep.vue-treeselect__placeholder {
  line-height: 28px;
}
.left ::v-deep.vue-treeselect__single-value {
  line-height: 30px;
}
.left ::v-deep.el-input-number .el-input__inner {
  padding: unset;
}
.left ::v-deep.el-input-number {
  line-height: 30px;
}
.left ::v-deep.el-input-number__decrease,
.left ::v-deep.el-input-number__increase {
  width: 28px;
}
.sub_wrap {
  width: 100%;
  float: left;
  text-align: left;
  margin: 0 0 20px;
}
.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.right {
  float: right;
  width: 22%;
}
.edit_wrap {
  width: 100%;
  float: left;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.edit_wrap ::v-deep.ql-container {
  height: calc(100% - 66px);
}
.edit_wrap ::v-deep.ql-toolbar {
  text-align: left;
}
.dialog-footer {
  width: 100%;
  clear: both;
}
.item_footer {
  width: 100%;
  clear: both;
}
.pc,
.wx {
  position: relative;
}
.upload_wrap ::v-deep.el-upload {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.upload_wrap ::v-deep.el-upload-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.upload_wrap {
  height: 150px;
  position: relative;
}
.enclo {
  text-align: left;
}
.enclo .el-upload__tip {
  line-height: 40px;
  display: inline-block;
  height: 40px;
  margin-top: unset;
}
</style>